<template>
  <view>
    <!-- 头像信息 -->
    <uni-card>
      <view class="">
        <view class="main">
          <image :src="item.disposeAvatar" mode=""></image>
          <view class="">
            <view class="main-time">
              处理人
              <text>{{ item.disposeMan }}</text>
            </view>
            <view class="main-time">
              处理时间
              <text>{{ item.disposeDate || '暂无' }}</text>
            </view>
          </view>

        </view>
        <view class="main-bottom">
          <view class="content">
            故障单号
            <text>{{ item.faultCode }}</text>
          </view>
          <view class="content">
            上报时间
            <text>{{ item.reportTime }}</text>

            <text>{{ item.reportType }}</text>
          </view>
        </view>
      </view>
    </uni-card>

    <!-- 故障描述 -->
    <uni-card>
      <view class="record">
        <view class="record-div">
          <view class="record-address">
            故障描述
            <view class="record-state">
              <DictTag :dict-value="getDict(DictEnum.IOT_FAULT_TYPE)" :value="item.faultType"></DictTag>
            </view>
          </view>

        </view>
        <view class="record-time">
          故障时长
          <text>{{ item.faultDuration }}</text>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
import {getElevatorFault} from "@/api/iot/elevatorFault";
import {getDict} from "@/utils/dict";
import {DictEnum} from "@/enums/dictEnum";

export default {
  computed: {
    DictEnum() {
      return DictEnum
    }
  },
  data() {
    return {
      item: {},
    }
  },
  onLoad(e) {
    this.faultId = e.faultId
    this.getInfoDetail()
  },
  methods: {
    getDict,
    async getInfoDetail() {
      const res = await getElevatorFault(this.faultId);
      this.item = res
      uni.setNavigationBarTitle({
        title: res.elevatorName,
      })

    }

  }
}
</script>

<style scoped>
.uni-card {
  width: 670rpx;
  /* height: 280rpx; */
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  border: none;

}

.main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1rpx solid #E2E6EF;
  padding-bottom: 15rpx;
}

.main image {
  width: 80rpx;
  height: 80rpx;
  background: #E2E6EF;
  border: 4rpx solid #F0F3F6;
  border-radius: 50%;
  margin-right: 18rpx;

}

.main-time {
  font-size: 24rpx;
  color: #989BA6;
}

.main-time text {
  margin-left: 20rpx;
  color: #34363D;
}

/* 头像下面内容 */
.main-bottom {
  margin-top: 15rpx;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 30rpx;
  font-weight: 400;
  color: #989BA6;

}

.content text {
  margin-left: 15rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #34363D;
}

.alarm image {
  width: 24rpx;
  height: 24rpx;
  vertical-align: middle;
  margin-right: 10rpx;
}

.alarm text {
  font-size: 24rpx;
  color: #34363D;

}

.address {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #989BA6;
}

/* 故障描述 */
.record {
  font-family: PingFang SC;
  font-weight: 400;

}

.record-div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20rpx;
  word-spacing: 10rpx;
  margin-bottom: 15rpx;
  border-bottom: 1px solid #E2E6EF;
}

.record-address {
  font-size: 30rpx;
  color: #34363D;
  margin-bottom: 10rpx;
  font-weight: 400;
  line-height: 50rpx;

}

.record-address view {
  margin-bottom: 10rpx;
}

.record-state {
  font-size: 30rpx;
  color: #017EFE;
}

.record-time {
  font-size: 24rpx;
  color: #989BA6;

}

.record-time text {
  margin-left: 15rpx;

  color: #34363D;
}
</style>
